console.log("Hello World!");

//静态资源
import imgsrc from './assets/garden.png'


const img = document.createElement('img');
img.src = imgsrc;
img.style.height = '400px';
img.style.width = '855px';
img.style.margin = '0px 255px';
img.style.display = 'block';
document.body.appendChild(img);


import imgdingdan from './assets/dingdan.svg'
var father_svg = document.createElement('div');
father_svg.style.cssText = "display:flex;justify-content: space-between;"
father_svg.id = 'father_svg';
document.body.appendChild(father_svg);
var box_svg = [];
for (let i = 0; i < 4; i++) {
    box_svg[i] = document.createElement('img');
    box_svg[i].style.cssText = "height:100px;width:100px;display:block;"
    box_svg[i].src = imgdingdan;
    document.getElementById('father_svg').appendChild(box_svg[i]);
}


import example from './assets/example.txt'
var father = document.createElement('div');
father.style.cssText = "display:flex;justify-content: space-between;"
father.id = 'father';
document.body.appendChild(father);
// console.log(document.getElementById('father'));
var box = [];
for (let i = 0; i < 4; i++) {
    box[i] = document.createElement('div');
    box[i].style.cssText = 'height:100px;width:100px;background-color:red;color:white;text-align: center;line-height: 100px;font-size:14px'
    box[i].textContent = example;
    document.getElementById('father').appendChild(box[i]);
}

//导入css
import './style/index.css'

//导入第三方模块
import $ from 'jquery'
import Vue from 'vue'
new Vue({
    el: '#app',
    data: {
        message: 'hello webpack'
    }
})
console.log($)
console.log(Vue)